<template>
	<view>
		<view class="level_align flex_wrap tp-ptb0lr30 tp-mb20 tp-bgf tp-pb30" style="padding-right: 10rpx;">
			<view class="label-tag tp-dib tp-wsn tp-ptb0lr20 tp-br40 tp-lh44 tp-mt20 tp-mr20 tp-fc666 tp-bcF5  tp-fz26" :style="{background: active.key == item.key ? '#FEEDEC' : '#f5f5f5'}"
			 v-for="(item,index) in evaluateLabelList" :key="index" @click="selectLable(item)">
				{{item.label}}{{item.value ? '('+item.value+')':''}}
			</view>
		</view>
		
		<!-- 评价 S -->
		<view class="evaluate-box tp-bgf tp-mt20 tp-pt30">
			<!-- 暂无数据 S -->
			<view v-if="evaluateList.length == 0">
				<view class="tp-h98 tp-w100"></view>
				<text class="tp-h98 center_combo">暂无数据</text>
				<view class="tp-h98 tp-w100"></view>
			</view>
			<!-- 暂无数据 E -->
			<view class="tp-ptb0lr30  tp-pb20 tp-bgf" v-for="(item,index) in evaluateList" :key="index">
				<!-- 头部信息栏 -->
				<view class="level_align flex_between">
					<view class="level_align">
						<image class="tp-img64 tp-mr20 tp-br40" :src="item.customerAvatar" mode=""></image>
						<view class="flex flex_column flex_between">
							<view class="tp-lh44 tp-fc333 tp-fz26">
								{{item.customerName || ''}}
							</view>
							<view class="tp-lh40 tp-fc666">
								{{item.createTime || ''}}
							</view>
						</view>
					</view>
					<view class="tp-yellow tp-fz30 tp-fw600">
						{{item.score || 5}}分
					</view>
				</view>
				<!-- 内容 -->
				<view class="tp-mt20 tp-mt10">
					<view class="tp-fz26 tp-fc333 tp-lh44">
						{{item.content}}
					</view>
					<view class="level_align tp-mt20 flex_wrap">
						<view class="tp-mb20" v-for="(urlItm, ind) in item.imgsList" :index="ind" :key="ind" @click="previewImg(urlItm,item.imgsList)"
						 :style="{marginRight:(ind+1)%4 == 0 ?'0':'35.3rpx'}">
							<image class="imgs tp-br8" :src="urlItm" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评价 E -->
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: {
					key:-1,
					label: '全部',
				}, // 被选中的标签
				pageName: '', // 哪个页面的评论  hotel 酒店
				evaluateLabelList: [], // 标签
				evaluateList: [], // 列表
				id: '', // 酒店的id

				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 10, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				loadMoreText: "加载中...",
				showLoadMore: false, // 加载更多

			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.pageName = opt.pageName
			this.getEvaluateLabelList();
			this.getList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.pageNum = 1
			this.evaluateList = []
			this.loadMoreText = "加载中..."
			this.getList();
		},
		// 上拉触底
		onReachBottom() {
			if (this.pageNum < this.last_page) {
				this.showLoadMore = true;
				this.pageNum++
				this.getList();
			} else {
				this.loadMoreText = "已没有更多数据!"
			}
		},

		methods: {
			// 获取酒店评价标签 和评价
			getEvaluateLabelList() {
				let url = ''
				if (this.pageName == 'hotel') { // 酒店
					url = this.$api.hotelEvaluateLabelList + '?hotelId=' + this.id
				}else if (this.pageName == 'scenic') { // 景区
					url = this.$api.scenicDetailpjbqlist + '?jqId=' + this.id
				}else if (this.pageName == 'travel') { // 旅游
					url = this.$api.travelGroupEvaluateLabelList + '?travelId=' + this.id
				}
				this.$http.get(url).then(res => {
					if (res.code === 200) {
						this.evaluateLabelList = res.data
						this.evaluateLabelList.unshift(this.active)
					}
				})
			},
			// 获取列表
			getList() {
				let url = ''
				if (this.pageName == 'hotel') { // 酒店
					url = this.$api.hotelEvaluateList + '?hotelId=' + this.id + '&pageNum=' + this.pageNum + '&pageSize=10' +
						'&labelValue=' + this.active.key
				} else  if (this.pageName == 'scenic') { // 景区
					url = this.$api.scenicDetailpjlist + '?jqId=' + this.id + '&pageNum=' + this.pageNum + '&pageSize=10' +
						'&labelValue=' + this.active.key
				} else  if (this.pageName == 'travel') { // 旅游
					url = this.$api.travelGroupEvaluateList + '?travelId=' + this.id + '&pageNum=' + this.pageNum + '&pageSize=10' +
						'&labelValue=' + this.active.key
				}
				this.$http.get(url).then(res => {
					uni.stopPullDownRefresh();
					this.showLoadMore = false;
					if (res.code === 200) {
						this.last_page = res.data.pageTotal
						res.data.result.map(item => {
							item.imgsList = []
							let arr = item.evaluationImg.split(',')
							arr.map(it => {
								let src = this.$imgUrl + it
								item.imgsList.push(src)
							})
							if(!item.customerAvatar.startsWith('http')){
								item.customerAvatar = this.$imgUrl + item.customerAvatar
							}
						})
						if (this.pageNum > 1) {
							this.evaluateList = this.evaluateList.concat(res.data.result);
						} else {
							this.evaluateList = res.data.result
						}
						// if (this.evaluateList) {
						// 	this.evaluateList.forEach(item => {
						// 		item.imgsList = []
						// 		let arr = item.evaluationImg.split(',')
						// 		arr.map(it => {
						// 			let src = this.$imgUrl + it
						// 			item.imgsList.push(src)
						// 		})
								
						// 	})
						// }

					}
				})
			},
			// 选择标签
			selectLable(item) {
				this.active = item
				this.getList()
			},
			// 预览图片
			previewImg(url,arr) {
				console.log(url);
				// let arr = []
				// this.list
				uni.previewImage({
					current: url,
					urls: arr,
					success: function(){
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 评价
	.evaluate-box {
		.imgs {
			width: 146rpx;
			height: 130rpx;
		}
	}
</style>
